<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.staticfile.org/vue/2.7.8/vue.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css">
        <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
        <title>租箱需求</title>
    </head>
    
    <body>
        <div class="father">
            <div id="app" class="bigbox">
                <div class="lead-title">
                    <span class="title">Equipment Demand</span>
                    <span class="cancel"></span>
                </div>
                <div class="lead-form">
                    <div class="form-title1">
                        <!-- <span></span> -->
                        Basic Information
                    </div>
                    <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Equipment Condition">
                            <a-tag color="blue" v-if="dataarry.productionType=='New Production'">New Production</a-tag>
                            <a-tag color="orange" v-if="dataarry.productionType=='Depot Unit'">Depot Unit</a-tag>
                        </a-form-model-item>
                        <a-form-model-item class="wid31 inputnumber" ref="leasePeriodValue" label="Lease Period"
                            prop="leasePeriodValue">
                            {{dataarry.leasePeriodValue}} {{dataarry.leasePeriodType}} 
                        </a-form-model-item>
                        <div style="margin-left: 24px; ">
                            <a-form-model-item class="wid31" ref="unitType" label="Equipment Type" prop="unitType"
                                style="diaplay:flex;">
                                {{dataarry.unitType}} <span class="description"></span>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="form-title1">
                        <!-- <span></span> -->
                        Delivery Details
                    </div>
                    <div class="equipmentAdd_delivery">
                        <div class="title">Pick-up Location(s)</div>
                        <a-table :columns="columns" :data-source="dataarry.equipmentsDeliveryDTOS" :pagination="false" />
                         <template slot="Location" slot-scope="text">
                            <a v-if="text">{{ text }}</a>
                            <a-tag v-else>to be agreed</a-tag>
                          </template>
                          <template slot="Quantity" slot-scope="text">
                            <a v-if="text">{{ text }}</a>
                            <a-tag v-else>to be agreed</a-tag>
                          </template>
                        </a-table>
                        <div class="title" style="margin-top:24px">Build Up Period</div>
                        <div class="date" style="margin-top:4px">{{dataarry.buildUpBegin}} — {{dataarry.buildUpEnd}}</div>
                    </div>
                    <div class="form-title1">
                        <!-- <span></span> -->
                        Redelivery Preference
                    </div>
                    <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Redelivery Location(s) ">
                                <span class="adress-font" v-if='dataarry.redeliveryLocation'>  {{dataarry?.redeliveryLocation?.join()}} </span>
                                <span class="adress-font" v-else> - </span>
                        </a-form-model-item>
                    </div>
                    <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Build Down Period">
                            <span class="adress-font">{{dataarry.buildDownBegin}} - {{dataarry.buildDownEnd}}</span>
                        </a-form-model-item>
                    </div>
                    <div class="form-title1" v-if="dataarry.productionType == 'New Production'">
                        Spec Requirement
                    </div>
                    <div v-if="dataarry.productionType == 'New Production'" class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="">
                            <span class="adress-font" style="color: #86909C;" v-if="dataarry.specRequirement==0">Florens Spec</span>
                            <span class="adress-font" style="color: #86909C;" v-if="dataarry.specRequirement==1">Special Request</span>
                        </a-form-model-item>
                    </div>

                    <div class="module" v-if="dataarry.productionType=='New Production' && dataarry.unitType[0] === 'R'">
                    <div class="from-item2-t">Warranty Preference</div>
                    <div style="width: 100%">
                        <a-radio-group v-model="dataarry.equipmentsReeferDTO.isWarranty">
                            <a-radio disabled :value="0">
                                Standard Warranty (5 years)
                            </a-radio>
                            <br />
                            <a-radio disabled :value="1">
                                Customized Warranty Coverage
                            </a-radio>
                        </a-radio-group>
                    </div>
                    <div class="list1" v-if="dataarry?.equipmentsReeferDTO?.isWarranty == 1">
                        <a-form-model-item ref="warrantyCoverageValue" label="Preferred" prop="warrantyCoverageValue"
                            label-Align="left" class="inputnumber" style="margin-bottom: 0px;display: flex;align-items: flex-start;">
                            <span>{{dataarry?.equipmentsReeferDTO?.warrantyCoverageValue}}</span>
                            <span> Years</span>
                            <span style="margin-left: 8px">Warranty</span>
                        </a-form-model-item>
                    </div>
                    <div class="list1" v-if="dataarry.equipmentsReeferDTO.isWarranty == 1">
                        This customer can directly discuss about machine warranty with the factory to avoid addtiaonal cost:  {{dataarry.equipmentsReeferDTO.warrantyNegotiationStatusValue}}
                    </div>
                </div>


                    <div class="module" v-if='dataarry?.logoUrl?.length'>
                        <div class="form-title1">
                            Logo Requirement
                        </div>
                        <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Logo File">
                        <div class="attachment" v-for="(item,index) in dataarry.logoUrl" :key='index'>
                            <div class="element-left">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20" style="vertical-align: bottom;">
                                    <defs>
                                        <clipPath id="master_svg0_199_02592">
                                            <rect x="0" y="0" width="20" height="20" rx="0" />
                                        </clipPath>
                                    </defs>
                                    <g clip-path="url(#master_svg0_199_02592)">
                                        <g>
                                            <path
                                                d="M2.5,2.49998298828125C2.5,1.57950498828125,3.2461919999999997,0.83331298828125,4.16667,0.83331298828125L12.155,0.83331298828125C12.376,0.83336027458125,12.5879,0.92118858828125,12.7442,1.07747998828125L17.2558,5.58914298828125C17.4122,5.74550298828125,17.5,5.95743298828125,17.5,6.17831298828125L17.5,17.50001298828125C17.5,18.42041298828125,16.7538,19.16661298828125,15.8333,19.16661298828125L4.16667,19.16661298828125C3.2461919999999997,19.16661298828125,2.5,18.42041298828125,2.5,17.50001298828125L2.5,2.49998298828125Z"
                                                fill="#F01D94" fill-opacity="1" />
                                        </g>
                                        <g>
                                            <path
                                                d="M12.5,1.23583476171875C12.4999467532,1.16849006171875,12.540427,1.10773136171875,12.602596,1.08184256171875C12.664766,1.0559539617187501,12.736406,1.07002337771875,12.784166,1.11750116171875L17.21667,5.55000076171875C17.26414,5.59776076171875,17.27821,5.66940076171875,17.25233,5.73157076171875C17.22644,5.79374076171875,17.165680000000002,5.83422076171875,17.09833,5.83417076171875L14.16667,5.83417076171875C13.246192,5.83417076171875,12.5,5.08797076171875,12.5,4.16750076171875L12.5,1.23583476171875Z"
                                                fill="#C71077" fill-opacity="1" />
                                        </g>
                                        <g>
                                            <path
                                                d="M5.8333740234375,13.95831298828125C5.8333744208015,13.61313298828125,6.1131960234375,13.33331298828125,6.4583740234375,13.33331298828125L11.0417040234375,13.33331298828125C11.3868840234375,13.33331298828125,11.6667040234375,13.61313298828125,11.6667040234375,13.95831298828125C11.6667040234375,14.30349298828125,11.3868840234375,14.58331298828125,11.0417040234375,14.58331298828125L6.4583740234375,14.58331298828125C6.1131960234375,14.58331298828125,5.8333744208015,14.30349298828125,5.8333740234375,13.95831298828125ZM6.4583740234375,9.58331298828125C6.1131960234375,9.58331298828125,5.8333744208015,9.86313498828125,5.8333744208015,10.20831298828125C5.8333744208015,10.55349098828125,6.1131960234375,10.83331298828125,6.4583740234375,10.83331298828125L13.5417040234375,10.83331298828125C13.8868840234375,10.83331298828125,14.1667040234375,10.55349098828125,14.1667040234375,10.20831298828125C14.1667040234375,9.86313498828125,13.8868840234375,9.58331298828125,13.5417040234375,9.58331298828125L6.4583740234375,9.58331298828125Z"
                                                fill="#FFFFFF" fill-opacity="1" />
                                        </g>
                                    </g>
                                </svg>
                                <span>{{item.fullFileName}}</span>
                            </div>
                            <div class="element-right">
                              <span @click='preview(item.previewLogoUrl)' style="cursor: pointer;">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                                    width="15.570528030395508" height="11.642857551574707" viewBox="0 0 15.570528030395508 11.642857551574707" style="margin-right: 10px;">
                                    <g style="mix-blend-mode:passthrough">
                                        <path
                                            d="M15.4674,6.28036C13.7745,9.84821,11.2174,11.6429,7.78526,11.6429C4.3549,11.6429,1.79597,9.84821,0.103117,6.28214C0.0352155,6.13836,0,5.98133,0,5.82232C2.53765e-16,5.66331,0.0352155,5.50628,0.103117,5.3625C1.79597,1.79464,4.35312,0,7.78526,0C11.2156,0,13.7745,1.79464,15.4674,5.36071C15.4674,5.36071,15.4674,5.36071,15.4674,5.36071C15.6049,5.65536,15.6049,5.99107,15.4674,6.28036ZM7.78526,1.28571C4.9049,1.28571,2.79597,2.74643,1.30847,5.82143C2.79597,8.89643,4.9049,10.3571,7.78526,10.3571C10.6674,10.3571,12.7763,8.89643,14.262,5.82143C12.7745,2.74643,10.6656,1.28571,7.78526,1.28571ZM7.71383,8.96429C5.97812,8.96429,4.57097,7.55714,4.57097,5.82143C4.57097,4.08571,5.97812,2.67857,7.71383,2.67857C9.44954,2.67857,10.8567,4.08571,10.8567,5.82143C10.8567,7.55714,9.44954,8.96429,7.71383,8.96429ZM7.71383,3.82143C6.60847,3.82143,5.71383,4.71607,5.71383,5.82143C5.71383,6.92679,6.60847,7.82143,7.71383,7.82143C8.81919,7.82143,9.71383,6.92679,9.71383,5.82143C9.71383,4.71607,8.81919,3.82143,7.71383,3.82143Z"
                                            fill="#000000" fill-opacity="0.8500000238418579" />
                                    </g>
                                </svg>
                                </span>
                                <span @click='download(item.downloadUrl)' style="cursor: pointer;">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                                    width="13.357144355773926" height="12.571430206298828" viewBox="0 0 13.357144355773926 12.571430206298828">
                                    <g style="mix-blend-mode:passthrough">
                                        <path
                                            d="M4.67857,6.18393C4.67857,6.18393,5.99821,6.18393,5.99821,6.18393C5.99821,6.18393,5.99821,0.142857,5.99821,0.142857C5.99821,0.0642857,6.0625,0,6.14107,0C6.14107,0,7.2125,0,7.2125,0C7.29107,0,7.35536,0.0642857,7.35536,0.142857C7.35536,0.142857,7.35536,6.18571,7.35536,6.18571C7.35536,6.18571,8.67857,6.18571,8.67857,6.18571C8.79821,6.18571,8.86429,6.32321,8.79107,6.41607C8.79107,6.41607,6.79107,8.94643,6.79107,8.94643C6.77771,8.9635,6.76063,8.97731,6.74114,8.98681C6.72165,8.99631,6.70025,9.00124,6.67857,9.00124C6.65689,9.00124,6.63549,8.99631,6.616,8.98681C6.59651,8.97731,6.57944,8.9635,6.56607,8.94643C6.56607,8.94643,4.56607,6.41429,4.56607,6.41429C4.49286,6.32143,4.55893,6.18393,4.67857,6.18393ZM13.3571,12C13.3571,12.3161,13.1018,12.5714,12.7857,12.5714C12.7857,12.5714,0.571429,12.5714,0.571429,12.5714C0.255357,12.5714,0,12.3161,0,12C0,12,0,8.46429,0,8.46429C0,8.38572,0.0642857,8.32143,0.142857,8.32143C0.142857,8.32143,1.21429,8.32143,1.21429,8.32143C1.29286,8.32143,1.35714,8.38572,1.35714,8.46429C1.35714,8.46429,1.35714,11.2143,1.35714,11.2143C1.35714,11.2143,12,11.2143,12,11.2143C12,11.2143,12,8.46429,12,8.46429C12,8.38572,12.0643,8.32143,12.1429,8.32143C12.1429,8.32143,13.2143,8.32143,13.2143,8.32143C13.2929,8.32143,13.3571,8.38572,13.3571,8.46429C13.3571,8.46429,13.3571,12,13.3571,12Z"
                                            fill="#000000" fill-opacity="0.8500000238418579" />
                                    </g>
                                </svg>
                                </span>
                            </div>
                        </div>
                    </a-form-model-item>
    
                        </div>
                        <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                            <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Description">
                                <span class="adress-font">{{dataarry.logoSize}}</span>
                            </a-form-model-item>
    
                        </div>
                    </div>
                    <div class="module" v-if='dataarry?.specUrl?.length'>
                        <div class="form-title1">
                            Customized Spec
                        </div>
                        <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Spec File">
                        <div class="attachment"  v-for="(item,index) in dataarry.specUrl" :key='index'>
                            <div class="element-left">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20"
                                    height="20" viewBox="0 0 20 20" style="vertical-align: bottom;">
                                    <defs>
                                        <clipPath id="master_svg0_199_02592">
                                            <rect x="0" y="0" width="20" height="20" rx="0" />
                                        </clipPath>
                                    </defs>
                                    <g clip-path="url(#master_svg0_199_02592)">
                                        <g>
                                            <path
                                                d="M2.5,2.49998298828125C2.5,1.57950498828125,3.2461919999999997,0.83331298828125,4.16667,0.83331298828125L12.155,0.83331298828125C12.376,0.83336027458125,12.5879,0.92118858828125,12.7442,1.07747998828125L17.2558,5.58914298828125C17.4122,5.74550298828125,17.5,5.95743298828125,17.5,6.17831298828125L17.5,17.50001298828125C17.5,18.42041298828125,16.7538,19.16661298828125,15.8333,19.16661298828125L4.16667,19.16661298828125C3.2461919999999997,19.16661298828125,2.5,18.42041298828125,2.5,17.50001298828125L2.5,2.49998298828125Z"
                                                fill="#F01D94" fill-opacity="1" />
                                        </g>
                                        <g>
                                            <path
                                                d="M12.5,1.23583476171875C12.4999467532,1.16849006171875,12.540427,1.10773136171875,12.602596,1.08184256171875C12.664766,1.0559539617187501,12.736406,1.07002337771875,12.784166,1.11750116171875L17.21667,5.55000076171875C17.26414,5.59776076171875,17.27821,5.66940076171875,17.25233,5.73157076171875C17.22644,5.79374076171875,17.165680000000002,5.83422076171875,17.09833,5.83417076171875L14.16667,5.83417076171875C13.246192,5.83417076171875,12.5,5.08797076171875,12.5,4.16750076171875L12.5,1.23583476171875Z"
                                                fill="#C71077" fill-opacity="1" />
                                        </g>
                                        <g>
                                            <path
                                                d="M5.8333740234375,13.95831298828125C5.8333744208015,13.61313298828125,6.1131960234375,13.33331298828125,6.4583740234375,13.33331298828125L11.0417040234375,13.33331298828125C11.3868840234375,13.33331298828125,11.6667040234375,13.61313298828125,11.6667040234375,13.95831298828125C11.6667040234375,14.30349298828125,11.3868840234375,14.58331298828125,11.0417040234375,14.58331298828125L6.4583740234375,14.58331298828125C6.1131960234375,14.58331298828125,5.8333744208015,14.30349298828125,5.8333740234375,13.95831298828125ZM6.4583740234375,9.58331298828125C6.1131960234375,9.58331298828125,5.8333744208015,9.86313498828125,5.8333744208015,10.20831298828125C5.8333744208015,10.55349098828125,6.1131960234375,10.83331298828125,6.4583740234375,10.83331298828125L13.5417040234375,10.83331298828125C13.8868840234375,10.83331298828125,14.1667040234375,10.55349098828125,14.1667040234375,10.20831298828125C14.1667040234375,9.86313498828125,13.8868840234375,9.58331298828125,13.5417040234375,9.58331298828125L6.4583740234375,9.58331298828125Z"
                                                fill="#FFFFFF" fill-opacity="1" />
                                        </g>
                                    </g>
                                </svg>
                                <span>{{item.fullFileName}}</span>
                            </div>
                        <div class="element-right">
                        <span @click='preview(item.previewLogoUrl)' style="cursor: pointer;">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                                width="15.570528030395508" height="11.642857551574707" viewBox="0 0 15.570528030395508 11.642857551574707"
                                style="margin-right: 10px;">
                                <g style="mix-blend-mode:passthrough">
                                    <path
                                        d="M15.4674,6.28036C13.7745,9.84821,11.2174,11.6429,7.78526,11.6429C4.3549,11.6429,1.79597,9.84821,0.103117,6.28214C0.0352155,6.13836,0,5.98133,0,5.82232C2.53765e-16,5.66331,0.0352155,5.50628,0.103117,5.3625C1.79597,1.79464,4.35312,0,7.78526,0C11.2156,0,13.7745,1.79464,15.4674,5.36071C15.4674,5.36071,15.4674,5.36071,15.4674,5.36071C15.6049,5.65536,15.6049,5.99107,15.4674,6.28036ZM7.78526,1.28571C4.9049,1.28571,2.79597,2.74643,1.30847,5.82143C2.79597,8.89643,4.9049,10.3571,7.78526,10.3571C10.6674,10.3571,12.7763,8.89643,14.262,5.82143C12.7745,2.74643,10.6656,1.28571,7.78526,1.28571ZM7.71383,8.96429C5.97812,8.96429,4.57097,7.55714,4.57097,5.82143C4.57097,4.08571,5.97812,2.67857,7.71383,2.67857C9.44954,2.67857,10.8567,4.08571,10.8567,5.82143C10.8567,7.55714,9.44954,8.96429,7.71383,8.96429ZM7.71383,3.82143C6.60847,3.82143,5.71383,4.71607,5.71383,5.82143C5.71383,6.92679,6.60847,7.82143,7.71383,7.82143C8.81919,7.82143,9.71383,6.92679,9.71383,5.82143C9.71383,4.71607,8.81919,3.82143,7.71383,3.82143Z"
                                        fill="#000000" fill-opacity="0.8500000238418579" />
                                </g>
                            </svg>
                          </span>
                          <span @click='download(item.downloadUrl)' style="cursor: pointer;">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                                width="13.357144355773926" height="12.571430206298828" viewBox="0 0 13.357144355773926 12.571430206298828">
                                <g style="mix-blend-mode:passthrough">
                                    <path
                                        d="M4.67857,6.18393C4.67857,6.18393,5.99821,6.18393,5.99821,6.18393C5.99821,6.18393,5.99821,0.142857,5.99821,0.142857C5.99821,0.0642857,6.0625,0,6.14107,0C6.14107,0,7.2125,0,7.2125,0C7.29107,0,7.35536,0.0642857,7.35536,0.142857C7.35536,0.142857,7.35536,6.18571,7.35536,6.18571C7.35536,6.18571,8.67857,6.18571,8.67857,6.18571C8.79821,6.18571,8.86429,6.32321,8.79107,6.41607C8.79107,6.41607,6.79107,8.94643,6.79107,8.94643C6.77771,8.9635,6.76063,8.97731,6.74114,8.98681C6.72165,8.99631,6.70025,9.00124,6.67857,9.00124C6.65689,9.00124,6.63549,8.99631,6.616,8.98681C6.59651,8.97731,6.57944,8.9635,6.56607,8.94643C6.56607,8.94643,4.56607,6.41429,4.56607,6.41429C4.49286,6.32143,4.55893,6.18393,4.67857,6.18393ZM13.3571,12C13.3571,12.3161,13.1018,12.5714,12.7857,12.5714C12.7857,12.5714,0.571429,12.5714,0.571429,12.5714C0.255357,12.5714,0,12.3161,0,12C0,12,0,8.46429,0,8.46429C0,8.38572,0.0642857,8.32143,0.142857,8.32143C0.142857,8.32143,1.21429,8.32143,1.21429,8.32143C1.29286,8.32143,1.35714,8.38572,1.35714,8.46429C1.35714,8.46429,1.35714,11.2143,1.35714,11.2143C1.35714,11.2143,12,11.2143,12,11.2143C12,11.2143,12,8.46429,12,8.46429C12,8.38572,12.0643,8.32143,12.1429,8.32143C12.1429,8.32143,13.2143,8.32143,13.2143,8.32143C13.2929,8.32143,13.3571,8.38572,13.3571,8.46429C13.3571,8.46429,13.3571,12,13.3571,12Z"
                                        fill="#000000" fill-opacity="0.8500000238418579" />
                                </g>
                            </svg>
                            </span>
                        </div>
                        </div>
                    </a-form-model-item>
    
                        </div>
                        <div class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                            <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Description">
                                <span class="adress-font">{{dataarry.requirementContent}}</span>
                            </a-form-model-item>
    
                        </div>
                    </div>
                    <div class="form-title1">
                        Rate Structure/Type Preference
                    </div>
                    <div class="module">
                        <div class="from-item" style="flex-direction: column" id="Type">
                        
                            <div class="radiolist">
                                <div class="radiolist-l">Accept Fixed Rate structure:</div>
                                <div class="radiolist-r">
                                    {{dataarry.productionType === 'New Production'? dataarry.fixedRateStatus :  dataarry.tierRateStatus}}
                                </div>
                            </div>
                            <div class="radiolist" v-if="dataarry.productionType === 'New Production'">
                                <div class="radiolist-l">Accept Tier Rate structure:</div>
                                <div class="radiolist-r">
                                    {{dataarry.tierRateStatus}}
                                </div>
                            </div>
                            <div class="radiolist childre-line" v-if="dataarry.tierRate">
                                <a-form-model-item class="radio_adaption" ref="includingCurtainTruck"
                                    label="Preferred Tier Rate Structure:" prop="includingCurtainTruck">
                                    {{dataarry.tierRate}}
                                </a-form-model-item>
                            </div>
                            <div class="radiolist">
                                <div class="radiolist-l">Require ETO (Early Termination) Rate structure:</div>
                                <div class="radiolist-r">
                                    {{dataarry.terminationRateStatus}}
                                </div>
                            </div>
                            <div class="radiolist">
                                <div class="radiolist-l">Accept additional Pick-up Charge:</div>
                                <div class="radiolist-r">
                                    {{dataarry.additionalPickUpStatus}}
                                </div>
                            </div>
                            <div class="radiolist childre-line" v-if="dataarry.payType" v-show="dataarry.productionType === 'New Production'">
                                <a-form-model-item class="radio_adaption" ref="includingCurtainTruck"
                                    label="Additional charge preferred paid by:" prop="includingCurtainTruck">
                                    {{dataarry.payType}}
                                </a-form-model-item>
                            </div>
                            <div class="radiolist"  v-if="dataarry.downPaymentStatus" v-show="dataarry.productionType === 'New Production'">
                                <div class="radiolist-l">Accept Down Payment arrangement:</div>
                                <div class="radiolist-r">
                                    {{dataarry.downPaymentStatus}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-title1" v-if=" dataarry.unitType[0] == 'R'">
                        Reefers Preference
                    </div>
                    <div v-if="dataarry.productionType=='NP'||dataarry.unitType[0] == 'R'" class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Machine Type" v-if='dataarry?.equipmentsReeferDTO?.machineType'>
                            {{dataarry?.equipmentsReeferDTO?.machineTypeValue}}
                        </a-form-model-item>
                        <a-form-model-item class="wid31 inputnumber"  ref="leasePeriodValue" label="Warranty"
                            prop="leasePeriodValue">
                            {{dataarry?.equipmentsReeferDTO?.warrantyCoverageValue}} Years<a-tag color="blue"
                                style="margin-left:8px">Can discuss with factory</a-tag>
                        </a-form-model-item>
                    </div>
                    <div  v-if="dataarry.productionType=='NP'||dataarry.unitType[0] == 'R'" v-show="dataarry.unitType[0] == 'R'" class="from-item" id="Name" style="display:flex;align-items:flex-start;">
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Controlled Atmosphere"
                            v-if="dataarry.requestedCa== 'N'">
                            NO<a-tag color="blue" style="margin-left:8px">Including curtain track</a-tag>
                        </a-form-model-item>
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Controlled Atmosphere"
                            v-else-if="dataarry.requestedCa== 'Y'">
                            Yes<a-tag color="blue" style="margin-left:8px">Including curtain track</a-tag>
                        </a-form-model-item>
                        <a-form-model-item class="wid31" ref="UnproductionTypeit" label="Controlled Atmosphere"
                            v-else-if="dataarry.requestedCa== 'NS'">
                            Not Sure<a-tag color="blue" style="margin-left:8px">Including curtain track</a-tag>
                        </a-form-model-item>
                        <a-form-model-item class="wid31 inputnumber" ref="leasePeriodValue"
                            label="GPS Device Responsibility" prop="leasePeriodValue">
                            {{dataarry?.equipmentsReeferDTO?.gpsOwnerTypeValue}}
                        </a-form-model-item>
                    </div>
                    

                    <div class="module" v-if="dataarry.productionType=='NP'||dataarry.unitType[0] == 'R'">
                        <div class="from-item2-t" style="color: #86909C;">Reefer Customer Background Checking</div>
                        <div class="list1 list2" style="color: #86909C;">
                            This customer normally return the reefers to the Lessor at age <span class="font-bord">{{dataarry?.equipmentsReeferDTO?.planReturnAgeValue}}</span> Years
                        </div>
                        <div class="list1 list2" style="color: #86909C;" >
                            This customer will
                           <span class="font-bord"> {{dataarry?.equipmentsReeferDTO?.expireReturnType}}</span>
                            <span style="margin-left: 8px">after the 1st Lease.</span>
                        </div>
                    </div>

                    
                    <div class="form-title1">
                        Commentary
                    </div>
                    <div class="title"><span class="content">{{dataarry.remark || '-'}}</span></div>
                </div>
            </div>
        </div>
        </div>
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.js"></script>
        <script>
            let data={"equipmentHeadId":null,"dealId":"UwuS6tNs4VNADVfA1y3Ugr","productionType":"New Production","productionTypeValue":null,"leasePeriodValue":1,"leasePeriodType":"Years","leasePeriodTypeValue":null,"unitType":"R4H","redeliveryLocation":null,"redeliveryLocationCode":null,"logoUrl":null,"logoSize":null,"logoColorCode":null,"specRequirement":0,"specUrl":null,"requirementContent":null,"fixedRateStatus":"NO","fixedRateStatusValue":null,"tierRateStatus":"NO","tierRateStatusValue":null,"tierRate":null,"terminationRateStatus":"NO","terminationRateStatusValue":null,"additionalPickUpStatus":"NO","additionalPickUpStatusValue":null,"payType":null,"payTypeValue":null,"downPaymentStatus":"NO","downPaymentStatusValue":null,"remark":"33","equipmentsDeliveryDTOS":[{"id":"8tvxkvQofUFw7R7jRGZ8Np","equipmentId":"ACjs8d3Mxu3U76Xwa4eVj6","locationType":null,"location":"Johannesburg","locationCode":null,"quantity":null,"pickUpDate":null}],"equipmentsReeferDTO":{"id":"39292XA7LWUEHSAtLEbHKr","equipmentId":"ACjs8d3Mxu3U76Xwa4eVj6","machineType":"MC","machineTypeValue":"Carrier","isWarranty":1,"warrantyCoverageValue":66,"warrantyNegotiationStatus":"Y","warrantyNegotiationStatusValue":"YES","gpsOwnerType":"GLO","gpsOwnerTypeValue":"Lessee's","planReturnAgeValue":333,"expireReturnType":"WRHR","expireReturnTypeValue":"Return the RF"},"requestedCa":"Y","includingCurtainTruck":"N","locationDuringBooking":"No","quantityDuringBooking":"Yes","buildUpBegin":null,"buildUpEnd":null,"buildUpSwitch":"Yes","buildDownBegin":null,"buildDownEnd":null,"buildDownSwitch":"Yes","redeliveryLocationSwitch":null};
        </script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    dataarry: data,
                    data: [
                        {
                            key: '1',
                            location: 'Shanghai; Shenzhen',
                            Quantity: 100,
                        }, {
                            key: '2',
                            location: 'Shanghain',
                            Quantity: 200,
                        },
                    ],
                    columns: [
                        { title: 'Location', dataIndex: 'location',scopedSlots: { customRender: 'Location' } },
                        { title: 'Quantity', dataIndex: 'quantity',scopedSlots: { customRender: 'Quantity' } },
    
                    ],
    
                },
                methods: {
                    preview(url){
                        if(url){
                            window.open(url, '_self')
                        }
                    },
                    download(url){
                        if(url){
                            const a = document.createElement('a')
                            // 这里是将url转成blob地址，
                            fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
                                a.href = URL.createObjectURL(blob)
                                // a.download = url.split('/')[url.split('/').length - 1] //  // 下载文件的名字
                                a.download = url.substring(url.lastIndexOf('/') + 1, url.length)
                                document.body.appendChild(a)
                                a.click()
                                // 在资源下载完成后 清除 占用的缓存资源
                                window.URL.revokeObjectURL(a.href)
                                document.body.removeChild(a)
                            }).catch(() => {
                                window.open(url, '_self')
                            })
                        }
                    }
                },
                computed: {
    
                }
            })
        </script>
        <style>
       .ant-form-item-label>label:after{
            content: "";
            position: relative;
            top: -0.5px;
            margin: 0 8px 0 2px;
        }
    
    .father {
        width: 100%;
        padding-bottom: 80px;
    }
    
    .bigbox {
        width: 1200px;
        margin: 0 auto;
        background-color: #fff;
    
    }
    
    .lead-title {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        border-bottom: 1px solid #d9d9d9;
    
    
    }
    
    .title {
        font-size: 20px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85)
    }
    
    .cancel {
        font-size: 20px;
        cursor: pointer;
    }
    
    .lead-form {
        padding: 24px 24px;
    }
    
    .form-title1 {
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        margin-top: 4px;
    }
    
    .form-title1 span {
        width: 4px;
        height: 16px;
        border-radius: 4px 0px 0px 4px;
        background: #3E54AD;
        margin-right: 8px;
        display: block;
    }
    
    .from-item {
        display: flex;
        align-items: center;
    }
    
    .wid31 {
        width: 368px;
        font-size: 14px;
        color: #000000;
        font-weight: 500;
        margin-bottom: 0px;
    }
    
    .wid31 .description {
        color: #86909C;
        font-size: 14px;
    }
    
    .wid31 .ant-form-item-label {
        line-height: 15px
    }
    
    .ant-form-item-children {
        font-family: Arial;
        font-size: 14px;
    
        line-height: 22px;
    }
    
    .inputnumber .ant-select-selection {
        border-radius: 0px !important;
        border-left: 0px !important;
    }
    
    .ant-input-number {
        border-radius: 0px !important;
    
    }
    
    .ant-input-number-input {
    
        height: 29px !important;
    }
    
    .options-item {
        padding: 0 6px;
        font-size: 12px;
        border: 1px solid #d9d9d9;
        background: #fafafa;
        margin-left: 8px;
        cursor: pointer;
        border-radius: 2px;
    }
    
    .equipmentAdd_delivery {
        background: #FAFAFA;
        padding: 12px;
        border-radius: 4px;
    }
    
    .equipmentAdd_delivery .title {
        color: #86909C;
        font-size: 14px;
        ;
    }
    
    .equipmentAdd_delivery .date {
        color: #000000;
        font-size: 14px;
        ;
    }
    
    .Details-list {
        width: 100%;
        position: relative;
    }
    
    .Details-t {
        height: 30px;
        opacity: 1;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .Details-t div {
        padding-left: 12px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8500000238418579);
    
    }
    
    .Details-t div .ant-form-item {
        width: 200px;
    }
    
    .Details-b {
        min-height: 48px;
        opacity: 1;
        border-top: none;
        border-bottom: none;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #f0f0f0;
        padding: 10px 0px 5px 0px;
    }
    
    .ant-form-item-label>label {
        color: #86909C;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0px;
    
    }
    
    .module {
        border: 1px solid #F0F0F0;
        border-radius: 4px;
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .module .childre-line {
        height: 10px;
    }
    
    .module .title {
        color: #86909C;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
    
    }
    
    .module .value-line {
        color: #000000;
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .module .value-line .bord-font {
        font-weight: bold;
    }
    
    .attachment {
        border: 1px solid #F0F0F0;
        border-radius: 4px;
        padding: 17px;
        display: flex;
        justify-content: space-around;
    }
    
    .attachment .element-left {
        width: 50%;
    }
    
    .attachment .element-right {
        text-align: right;
        width: 50%;
    }
    
    .from-item {
        display: flex;
        align-items: center;
    
    }
    
    .from-item .radiolist:last-child {
        margin-bottom: 0px;
    }
    
    .radiolist {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .radiolist-l {
        width: 311px;
        font-size: 14px;
        font-weight: 400;
        color: #86909C;
    }
    
    .radiolist-r {
        font-size: 14px;
        font-weight: 500;
    }
    
    .radiolist .ant-form-item {
        display: flex;
        align-items: center;
        width: 800px !important;
    
    
    }
    
    .radiolist .ant-form-item .ant-input {
        height: 32px;
    
    }
    
    .radiolist .ant-form-item .ant-form-item-label {
        width: 311px;
        padding-left: 24px;
        text-align: left;
    }
    
    .ant-form-item-control-wrapper {
        width: 368px;
    }
    
    .radio_adaption.ant-form-item-control-wrapper {
        width: auto !important;
    }
    
    .radiolist .ant-form-item {
        margin-bottom: 0px;
    }
    
    .title {
        color: #86909C;
        font-size: 14px;
        font-weight: normal;
        line-height: 22px;
    }

    .content {
        display: -webkit-box;
        width: 1125px;
        line-height: 1.5;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        word-break: break-all;
      }
      .font-bord{
     font-weight: 400;
   }
      </style>
    </body>
    
    </html>